<%@ include file="/taglibs.jsp" %>

<div style="font: 12px">
<script type="text/javascript">
$(function() {
	$('#featureFromDate').datepicker({dateFormat:'yy-mm-dd',changeYear:true,changeMonth:true});
	$('#featureThruDate').datepicker({dateFormat:'yy-mm-dd',changeYear:true,changeMonth:true});
	
	/* jqgrid in pop up select box */
	
	var productFeatrueAppl = 
				[
				<s:iterator value="product.productFeatureAppl" id="pfa">
					{id:"<s:property value='id'/>", 
					featureApplType:"<s:property value='productFeatureApplType.name'/>",
					featureType:"<s:property value='feature.featureType.name'/>", 
					featureName:"<s:property value='feature.name'/>", 
					fromDate:"<s:property value='fromDate'/>", 
					thruDate:"<s:property value='thruDate'/>", 
					sequenceNum:"<s:property value='sequenceNum'/>"
					},
				</s:iterator>
				];
	jQuery("#productFeatureApplList").jqGrid( {
		datatype: "local",
		data : productFeatrueAppl,
		colNames : [ '<s:text name="module.common.id"/>',
		             '<s:text name="module.product.productFeatureApplType"/>', 
		 			 '<s:text name="module.product.featureType"/>', 
		 			'<s:text name="module.common.name"/>', 
		 			 '<s:text name="module.common.fromDate"/>',
		 			'<s:text name="module.common.thruDate"/>',
		 			 '<s:text name="module.common.sequenceNum"/>'],
		colModel : [ {name : 'id',index : 'id', width : 20, hidden:true}, 
		             {name : 'featureApplType', sortable : false, width : 180},
		             {name : 'featureType', sortable : false, width : 120}, 
					 {name : 'featureName',index : 'featureName', width : 120, 
							formatter:'showlink',formatoptions:{baseLinkUrl:'product!view.action',idName:'product.id'}},
		     		 {name : 'fromDate',sortable : false,width : 100},
		     		 {name : 'thruDate',sortable : false, width : 100},
		     		 {name : 'sequenceNum',index : 'sequenceNum', width : 80}],
		height: 'auto',
		multiselect : true,
		//editurl : 'product!jqgridOper.action',
		//onSelectRow: function(ids) {
		//	if(ids == null) {
		//		alert();
		//	}
			//window.location='product!view.action?product.id='+ids;
		//}
	});
	
	//for(var i=0;i<=mydata.length;i++)
	//	jQuery("#productFeatureApplJsonList").jqGrid('addRowData',i+1,productFeatrueAppl[i]);
	
    var selectoptions = <s:property value="#application['DOUBLE_SELECT_FEATURE_JQUERY']" escape="false"/>;
    $('#featureType').doubleSelect('feature', selectoptions);
	$("#addFeature").click(function(){
		if($("#addFeatureForm").valid()) {
			
			jQuery("#addFeatureForm").ajaxSubmit({
				target: "#result",
				success: addNewFeature,
				dataType:"json"
			});
			//newForm.action="product!createAndNew.action";
			//newForm.submit();
		}});
	function addNewFeature(jsonResult, statusText, xhr, $form)  {
		var rowNum = jQuery('#productFeatureApplList').jqGrid('getGridParam','rowNum');
		alert("jsonResult:" + jsonResult);
		jQuery("#productFeatureApplList").jqGrid('addRowData',rowNum,jsonResult);
	}
});//end

</script>
<h3>Edit Product Features</h3>
<table id="productFeatureApplList"></table>

<h3>Add Product Feature</h3>
<form id="addFeatureForm" action="product!addNewFeature.action" method="POST" autocomplete="off">
	<s:hidden name="product.id" />
	<fieldset>
	<table width="95%">
		<colgroup>
			<col width="22%" />
			<col width="28%" />
			<col width="22%" />
			<col width="28%" />
		</colgroup>
		<tbody>
			<tr>
				<td class="label">
					<s:label key="module.product.featureType" for="featureType"/></td>
				<td class="element">
				
				<select id="featureType" name="productFeatureAppl.feature.featureType.id"></select>
				<%-- 
				<s:select id="featureType" name="productFeatureAppl.feature.featureType.id" 
					value="product.productType.productTypeId"
					emptyOption="true" 
					list="#application['SELECT_FEATURE_TYPE']" />
				--%>
				
				<td class="label mandatory">
					<s:label key="module.product.feature" for="feature"/></td>
				<td class="element">
				<s:select id="feature" name="productFeatureAppl.feature.id" 
					value="productFeatureAppl.feature.id"
					list="#application['SELECT_FEATURE_TYPE']" cssClass="required"/>
			</tr>
			<tr>
				<td class="label mandatory">
					<s:label key="module.product.productFeatureApplType" for="productFeatureApplType"/></td>
				<td class="element">
				<s:select id="productFeatureApplType" name="productFeatureAppl.productFeatureApplType.id" 
					value="productFeatureAppl.productFeatureApplType.id"
					emptyOption="true" 
					list="#application['SELECT_PRODUCT_FEATURE_APPL_TYPE']" />
				<td class="label">
					<s:label key="module.common.sequenceNum" for="sequenceNum"/></td>
				<td style="vertical-align:top;padding-top:4">
					<s:textfield id="sequenceNum" name="productFeatureAppl.sequenceNum" maxlength="2" size="3"/></td>
			</tr>
			<tr>
				<td class="label">
					<s:label key="module.common.fromDate" for="featureFromDate"/></td>
				<td class="element"><s:textfield  id="featureFromDate" name="productFeatureAppl.fromDate"/></td>
				<td class="label">
					<s:label key="module.common.thruDate" for="featureThruDate"/></td>
				<td class="element">
					<s:textfield  id="featureThruDate" name="productFeatureAppl.thruDate"/></td>
			</tr>
			<tr>
				<td colspan="4"><button id="addFeature" type="button"><s:text name="button.add"/></button></td>
			</tr>
		</tbody>
	</table>
	</fieldset>
</form>

</div>
